<template>
  <div class="Image_statistics" :style="H_H">
    <div class="heard_title">影像/超声质量统计</div>
    <div style="margin-top: 10px; margin-bottom: -10px">
      <el-cascader
        :options="options_a"
        collapse-tags
        v-model="OrgansArr"
        style="margin-left: 10px"
        :props="{ checkStrictly: true }"
        @change="handleChange"
        clearable
      ></el-cascader>
      <el-select
        v-model="value2"
        filterable
        style="margin-left: 20px"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.Id"
          :label="item.Username"
          :value="item.Id"
        >
        </el-option>
      </el-select>
      <!-- <el-radio-group v-model="radio" style="margin-left: 10px">
        <el-radio :label="1">影像</el-radio>
        <el-radio :label="2">超声</el-radio>
      </el-radio-group> -->
      <!-- <el-date-picker
        v-model="formInfo.startDate"
        type="date"
        placeholder="选择日期"
        style="margin-left: 10px; width: 160px"
      >
      </el-date-picker>
      <span style="margin: 0 10px">至</span>
      <el-date-picker
        type="date"
        placeholder="选择日期"
        v-model="formInfo.endDate"
        style="width: 160px"
      >
      </el-date-picker> -->
      <el-button
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="getData"
      ></el-button>
    </div>
    <div style="margin-top: 40px" v-if="false">
      <el-descriptions
        class="margin-top"
        title=""
        :column="4"
        border
        :style="isW"
      >
        <el-descriptions-item>
          <template slot="label"> 当前机构 </template>
          北京大洋天空
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 当前机构人员 </template>
          全部
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 当前机构评分总和 </template>
          2600分
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 当前机构医师人数 </template>
          256名
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 影像优良率 </template>
          {{ 优良 }}%
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 影像不合格率 </template>
          0%
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 查询当前机构影像 </template>
          <el-button
            size="mini"
            icon="el-icon-s-promotion"
            @click="goto"
          ></el-button>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 查询当前人员影像 </template>
          <el-button
            size="mini"
            icon="el-icon-s-promotion"
            @click="goto"
          ></el-button>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="margin-top: 50px">
      <div id="main_1" :style="W_W"></div>
      <!-- <div id="main_2" :style="W_W"></div> -->
      <div id="main_3" :style="W_W"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      H_H: "",
      W_W: "",
      showCheckbox: true,
      options: [],
      options_a: [],
      value2: "",
      isW: "",
      value1: "",
      orgname: 1034,
      OrgansArr: 1034,
      formInfo: {
        startDate: "",
        endDate: "",
      },
      radio: 1,
      data_data: [],
      优良: "",
      orgId: "",
      maxTotal: 0,
    };
  },
  created() {
    if (this.$route.query.Token != null && this.$route.query.Token != "") {
      console.log(this.$route.query.Token, "KKKKKKKKKKKKKKKKKKKKKK");
      localStorage.setItem("token", this.$route.query.Token);
    } else {
    }

    this.H_H = "height:" + (window.innerHeight - 55) + "px;";
    this.W_W =
      "width:" +
      (window.innerWidth - 220) / 2 +
      "px;height:500px;display:inline-block;background-color: rgba(255, 255, 255, 0.1);padding:10px 5px 5px 0";
    this.isW = "width:" + (window.innerWidth - 320) + "px;";
    var myDate = new Date();
    var time = myDate.toLocaleDateString().split("/").join("-");

    this.formInfo.endDate = time;
    var pre = new Date();
    pre.setFullYear(pre.getFullYear() - 1);
    this.formInfo.startDate = pre.toLocaleDateString().split("/").join("-");
  },
  methods: {
    selectClear() {
      // 下拉框清除事件
      this.treeClick = null;
      this.selectLabel = null;
      this.selectValue = null;
    },
    filterNode(value, data) {
      // 树节点事件
      if (!value) {
        return true;
      }
      return data.label.indexOf(value) !== -1;
    },
    nodeClick(obj, node) {
      // 树点击事件
      this.treeClick = obj.value;
      this.selectLabel = obj.label;
      this.selectValue = obj.value;
    },
    checkChange(obj, node) {
      // 复选框点击事件
    },
    drawLine_1() {
      // 饼状图初始化事件
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main_1"));
      // 绘制图表
      var data = [];
      for (var i in this.data_data) {
        var item = {
          value: this.data_data[i].记录,
          name: this.data_data[i].SumScore,
        };
        data.push(item);
      }
      myChart.setOption({
        title: {
          text: "",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "影像质量等级",
            type: "pie",
            radius: "80%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },

    drawLine_3() {
      // 雷达图初始化事件
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main_3"));
      var indicator = [];
      var list = [];
      for (var i in this.data_data) {
        var item = {
          text: this.data_data[i].SumScore,
          // max: this.data_data[i].记录,
          max: this.maxTotal * 1 + 10,
        };
        list.push(this.data_data[i].记录);
        indicator.push(item);
      }
      // 绘制图表
      myChart.setOption({
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: "center",
          data: [],
        },
        radar: [
          {
            indicator: indicator,
            center: ["50%", "50%"],
            radius: 180,
          },
        ],
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            areaStyle: {},
            data: [
              {
                value: list,
                name: "影像质量等级",
              },
            ],
          },
        ],
      });
    },
    gettree_list() {
      // 获取组织数据
      this.$post(baseUrl.hrIp + "/auth/organs/searchlist", {}).then((res) => {
        if (res.code == 1) {
          this.options_a = res.data;
        }
      });
    },
    getuser_data() {
      this.$get(
        baseUrl.hrIp + "/hr/employees?page=1&limit=10&name=&OrgID=" + this.orgId
      ).then((res) => {
        if (res.code == 1) {
          this.options = res.data.list;
          this.userId = res.data.list[0].Id;
          this.userName = res.data.list[0].Username;
          setTimeout((_) => {
            this.isShow = true;
          }, 200);
        }
      });
    },
    handleChange(value) {
      // 组织点击事件
      this.OrgansArr = value;
      this.orgId = value[value.length - 1];
      this.getuser_data();
    },
    goto() {
      // 跳转按钮事件
      this.$router.push({
        path: "/Image_statistics_query",
        query: { OrgansArr: this.OrgansArr, user: this.value2 },
      });
    },
    getData() {
      this.data_data = {};
      // 获取数据
      var body = { HospitalID: this.orgId, DoctorID: this.value2 };
      this.$post("/CommonInfo/qc_GetTotal", body).then((res) => {
        if (res.code == 0) {
          this.data_data = res.data;
          this.maxTotal = res.msg;
          // this.优良 =
          //   (this.data_data[1].记录 /
          //     (this.data_data[0].记录 + this.data_data[1].记录)) *
          //   100;
          this.drawLine_1();
          // this.drawLine_2();
          this.drawLine_3();
        }
      });
    },
  },
  watch: {},
  mounted() {
    this.gettree_list();
    this.getuser_data();
    this.getData();
  },
};
</script>

<style scoped lang="scss">
.h {
  font-weight: 700;
  color: #00bfff;
  font-size: 20px;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}
.m {
  margin-left: 15px;
}

.el-col {
  padding: 10px;
}
.box-card {
  height: 88vh;
  width: 96%;
  padding: 0;
  margin: 20px auto;
}
.el-input {
  width: 120px;
}
.el-input__inner {
  border-radius: 0;
}
.form_item {
  width: 50%;
  display: inline-block;
}
.sum {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
}
.Image_statistics {
  // background: url(../../assets/image/beijing.jpg);
  // background-color: rgb(7, 13, 39);
  // background-color: rgb(0, 0, 0);
  background-size: cover;
  background-repeat: no-repeat;
}
</style>